
body {display: flex;flex-direction: column;user-select: none;}
header {margin-bottom: 10px;}

/* music */
.music {width: 1024px; margin: auto;flex: 1;display: flex; overflow: hidden;}
.music .list {flex:1;display: flex; flex-direction: column;} 
.music .list h2 {color: #909399;margin: 10px 0;}
.music .list .content {flex:1;overflow-y: scroll} 
.music .list .content::-webkit-scrollbar { width: 0 !important }   
.music .list .row {color: #909399;font-size: 14px;margin: 20px 0;}
.music .list .row:nth-of-type(1) {margin: 10px 0;}

/* background: red; */
.music .list .row span:nth-of-type(1) {display: inline-block;width: 10%;position: relative;height: 15px; overflow: hidden;}
.music .list .row span:nth-of-type(2) {display: inline-block;width: 20%;}
.music .list .row span:nth-of-type(3) {display: inline-block;width: 25%;}
.music .list .row span:nth-of-type(4) {display: inline-block;width: 20%;}
.music .list .row span:nth-of-type(5) {display: inline-block;width: 20%;}
.music .list .row {padding:12px;}
.music .list .row:hover {background-color: #f6f7f8;cursor: pointer;}
.music .cover {width: 300px; height: 100%; text-align: center; color:rgb(153, 153, 153);}
.music .cover img {width: 200px; height: 200px;margin-top: 60px; }
.music .cover .content {cursor:pointer; width: 200px; height: calc(100% - 290px); overflow-y:scroll; margin: auto; }
.music .cover .content::-webkit-scrollbar { width: 0 !important }   
.music .cover .content ul { transition: all .5s;  }
.music .cover .content li { min-height: 40px; line-height: 40px; }
.music .cover .content li.active { color: rgb(6, 137, 212);  font-size: 20px;}
 
/* player */
.player {width: 100%;height: 80px;background-color: #fff; }
.player .play-bar {height: 2px;background-color: #e4e7ed;}
.player .play-bar .progress { width: 0%; height: 2px;background-color: #29d;}
.player .play-bar .bar {width: 14px;height: 14px; background-color: rgb(6, 137, 212); border-radius: 50%; position: relative;top: -8px;cursor: pointer;}
.player .play-box {
    width:1024px;
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.player .play-box .info {
    display: flex;
    align-items: center;
    justify-content: center;
}
.player .play-box .info span { margin: 0 20px; }
.player .play-box .info i { margin: 0 8px; }
.player .play-box .info img {width: 40px;height: 40px;}
.player .play-box .play { display: flex; align-items: center; justify-items: center; width: 200px;}
.player .play-box .play i {font-size:30px;cursor: pointer;}
.player .play-box .play .play-pause-box {width: 50px;height: 50px;border-radius: 50%; background-color: #29d;color:#fff;margin: 0 20px; display: flex; justify-content: center;align-items: center;transform: rotate(180deg);}
.player .play-box .play i:nth-of-type(1) {transform: rotate(180deg);}
.player .play-box .playbar-right {display: flex; }
.player .play-box .playbar-right > .volume {
    background: #e4e7ed;
    width: 100px;
    height: 2px;
    margin-top: 10px;
    margin-left: 30px;
    position: relative;
 }
.player .play-box .playbar-right > .volume i {position: absolute;top: -7px; left: -20px;}
.player .play-box .playbar-right > .volume .progress {  width: 50%;  height: 2px;  background-color: #29d;}
.player .play-box .playbar-right > .volume .bar { width: 14px; height: 14px; background-color: rgb(6, 137, 212); border-radius: 50%; position: relative; left: 50%;  top: -8px;  cursor: pointer;}



.playing {
    background-color: rgb(6, 137, 212);
    width: 2px;
    height: 10px;
    padding: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-block;
}
.line1 {
    -webkit-animation: play .6s linear infinite;
    animation: play .6s linear infinite
}

.line2 {
    -webkit-animation: play1 .6s linear infinite;
    animation: play1 .6s linear infinite;
    left: 4px
}

.line3 {
    -webkit-animation: play2 .6s linear infinite;
    animation: play2 .6s linear infinite;
    left: 8px
}
@-webkit-keyframes play {
    0% {
        transform: translateY(10px)
    }

    80% {
        transform: translateY(0)
    }

    10% {
        transform: translateY(10px)
    }
}

@keyframes play {
    0% {
        transform: translateY(10px)
    }

    80% {
        transform: translateY(0)
    }

    10% {
        transform: translateY(10px)
    }
}

@-webkit-keyframes play1 {
    0% {
        transform: translateY(10px)
    }

    60% {
        transform: translateY(0)
    }

    to {
        transform: translateY(10px)
    }
}

@keyframes play1 {
    0% {
        transform: translateY(10px)
    }

    60% {
        transform: translateY(0)
    }

    to {
        transform: translateY(10px)
    }
}

@-webkit-keyframes play2 {
    0% {
        transform: translateY(10px)
    }

    45% {
        transform: translateY(0)
    }

    to {
        transform: translateY(10px)
    }
}

@keyframes play2 {
    0% {
        transform: translateY(10px)
    }

    45% {
        transform: translateY(0)
    }

    to {
        transform: translateY(10px)
    }
}

.share-content {position: absolute; left: -300%;}